<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        width: 900px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="echarts1"></div>
    <div id="echarts2"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script>
      let echartsDiv1 = document.getElementById('echarts1')
      let echartsDiv2 = document.getElementById('echarts2')
      let echart1 = echarts.init(echartsDiv1)
      let echart2 = echarts.init(echartsDiv2)
      echart1.setOption({
        title: {
          text: 'echarts简单展示',
          subtext: '柱状图',
          left: 'center'
        },
        xAxis: {
          data: ['学习', '游戏', '读书', '运动']
        },
        yAxis: {
          axisLine: {
            show: true
          }
        },
        tooltip: { show: true },
        series: {
          type: 'bar',
          data: [40, 60, 20, 30]
        }
      })
      echart2.setOption({
        title: {
          text: 'echarts简单展示',
          subtext: '折线图',
          left: 'center'
        },
        xAxis: {
          data: ['深圳', '北京', '广州', '上海']
        },
        yAxis: {
          axisLine: {
            show: true
          }
        },
        series: {
          type: 'line',
          tooltip: { show: true },
          data: [0.9, 1.5, 0.3, 0.5]
        }
      })
    </script>
  </body>
</html>
